<template>
  <el-card header="活动管理">
    <template #header>
      <el-row>
        <el-col :span="12">
          <span style="font-size: 20px;font-weight: bold;">活动管理</span>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="reportListDialog = true; reportSearch()">报备记录</el-button>
        </el-col>
      </el-row>
    </template>
    <MForm :fields="fields" :modelValue="modelValue" @submit="search" @cancel="search">
      <template #extra>
      </template>
    </MForm>
    <el-table :data="tableData" border style="width: 100%" height="600">
      <el-table-column label="序号" prop="activityName" width="60" align="center">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动名称" prop="activityName" :show-overflow-tooltip="true"  align="center" />
      <el-table-column label="组织名称" prop="orgName" :show-overflow-tooltip="true"  align="center" />
      <el-table-column label="主管单位" prop="competentDept" :show-overflow-tooltip="true"  align="center" />
      <el-table-column label="活动状态" prop="approvalResult" width="130" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.approvalResult == 1 ? 'success' : scope.row.approvalResult == 2 ? 'danger' : 'warning'">
            <span class="tag">{{
              scope.row.approvalResult == 1 ? '审核通过' : scope.row.approvalResult == 2 ? '审核驳回' : '待审核'
            }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="活动类型" prop="activityTypeName" width="150" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.organizationType == 1 ? 'warning' : ''">
            <span class="tag">{{
              scope.row.organizationType == 1 ? '社团' : '民非'
            }}</span>
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="活动开始时间" prop="startTime" :show-overflow-tooltip="true" width="170" align="center" />
      <el-table-column label="活动结束时间" prop="endTime" :show-overflow-tooltip="true" width="170" align="center" />
      <el-table-column label="是否推送" prop="isPush" width="110" align="center">
        <template #default="scope">
          <span v-if="scope.row.approvalResult != 1"></span>
          <el-switch v-if="scope.row.approvalResult == 1" v-model="scope.row.isPush" @click="pushChange(scope.$index)"
            :inactive-value="0" :active-value="1" inline-prompt active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="点赞数量" prop="likes" :show-overflow-tooltip="true" width="100" align="center" />

      <el-table-column label="申请时间" prop="createTime" :show-overflow-tooltip="true" width="170" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.approvalResult == 0" type="text" :icon="View"
            @click="handleCheck(scope.row)">审核活动</el-button>
          <el-button v-else type="text" :icon="ChatDotRound" @click="searchDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageInfo-box">
      <el-pagination v-model:current-page="params.pageNum" :page-sizes="[100, 200, 300, 400]" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="search" />
    </div>
  </el-card>

  <el-dialog title="活动审核" v-model="openCheck" width="66%" append-to-body>
    <div class="active-detail-msg">
      <el-descriptions title="活动详情" :column="2" border>
        <el-descriptions-item label="活动名称">{{ chooseRow.activityName }}</el-descriptions-item>
        <el-descriptions-item label="活动地点">{{ chooseRow.place }}</el-descriptions-item>
        <el-descriptions-item label="活动时间">{{ chooseRow.startTime }}至{{ chooseRow.endTime }}</el-descriptions-item>
        <el-descriptions-item label="活动文档">
          <div v-for="(item, index) in JSON.parse(chooseRow.wdFileUrl)" :key="index">
            <span style="color:#289CFF;cursor: pointer;" @click="downloadFile(item.name, item.url)">{{ item.name
            }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="活动介绍" width="100px">
          {{ chooseRow.activityIntroduction }}</el-descriptions-item>
      </el-descriptions>

      <div class="video-img-box">
<!--        <div class="img-box" style="width:50%;">-->
<!--          <p>活动内容</p>-->
<!--          <div class="" style="padding: 10px;overflow: auto;">-->
<!--            {{ chooseRow.activityIntroduction }}-->
<!--          </div>-->
<!--        </div>-->
        <div class="img-box" style="width:70%;">
          <p>活动宣传图片</p>
          <div class="">
            <!-- <img :src="chooseRow.imgFileUrl1.url" alt=""> -->
            <el-image style="140px; height: 140px;margin-right: 7px;" v-for="(item, index) in chooseRow.imgFileUrl1" :key="index" :src="item"
              :preview-src-list="[...chooseRow.imgFileUrl1]">
            </el-image>
          </div>
        </div>
        <div class="video-box" style="width:30%;" v-if="chooseRow.mpFileUrl.length > 30">
          <p>活动视频</p>
          <div>
            <video width="640" height="360" controls :src="chooseRow.mpFileUrl1">
              <!-- <source :src="chooseRow.mpFileUrl1" type="video/mp4"> -->
              您的浏览器不支持视频标签。
            </video>
          </div>
        </div>
      </div>
    </div>
    <p style="font-size: 16px;
    font-weight: 700;color: #303133;margin-top: 30px;" v-if="chooseRow.approvalResult == 0">审核活动</p>
    <el-form ref="checkFormRef" :model="checkForm" label-width="auto" v-if="chooseRow.approvalResult == 0">
      <el-form-item label="审核结果">
        <el-radio-group v-model="checkForm.approvalResult">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="意见/理由">
        <el-input v-model="checkForm.remark" type="textarea" />
      </el-form-item>
    </el-form>

    <template #footer v-if="chooseRow.approvalResult == 0">
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="toClose()">取消</el-button>
        <el-button type="primary" @click="submitForm(checkFormRef)" :loading="saveLoad">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog title="活动报备记录" v-model="reportListDialog" width="80%" append-to-body>
    <el-table :data="reportData" border style="width: 100%" height="600">
      <el-table-column label="活动名称" prop="activityName" :show-overflow-tooltip="true" width="200" align="center" />
      <el-table-column label="组织名称" prop="orgName" :show-overflow-tooltip="true" width="200" align="center" />
      <el-table-column label="活动类型" prop="activityTypeName" :show-overflow-tooltip="true" width="150" align="center" />
      <el-table-column label="活动开始时间" prop="startTime" :show-overflow-tooltip="true" width="200" align="center" />
      <el-table-column label="活动结束时间" prop="endTime" :show-overflow-tooltip="true" width="200" align="center" />
      <el-table-column label="活动地点" prop="place" :show-overflow-tooltip="true" width="200" align="center" />
      <el-table-column label="活动介绍" prop="activityIntroduction" :show-overflow-tooltip="true" align="center" />
    </el-table>
    <div class="pageInfo-box">
      <el-pagination v-model:current-page="reportParams.pageNum" :page-sizes="[100, 200, 300, 400]" background
        layout="total, sizes, prev, pager, next, jumper" :total="reportParams.total" @current-change="reportSearch" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide, h } from 'vue'
import { fields, modelValue } from './config'
import { getList, getListReport, pushState, toCheck } from '@/api/evaluate/activite'
import { View, ChatDotRound } from '@element-plus/icons-vue'
import saveAs from 'file-saver'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'

const reportListDialog = ref(false);
const tableData = ref([])
const reportData = ref([]);
const total = ref(0)
const checkFormRef = ref()
const openCheck = ref(false)
let checkForm = reactive({
  approvalResult: '1',
  remark: '',
  id: ''
})

// 搜索
const params = ref<any>({
  pageSize: 10,
  pageNum: 1,
})
const reportParams = ref<any>({
  pageSize: 10,
  pageNum: 1,
  createBy: 1,
  total: 0
})

const downloadFile = (name, url) => {
  saveAs(url, name)
}
const dialogCheckVisible = ref(false) //审核
const openPress = ref(false) //查看审核进度
const dialogResultVisible = ref(false) //审核结果
const saveLoad = ref(false) //
let chooseRow = ref({}) //

const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
  getList(params.value).then(res => {
    tableData.value = res.data.rows
    total.value = res.data.total
  })
}

const pushChange = (index) => {
  const id = tableData.value[index].id;
  const isPush = tableData.value[index].isPush;
  pushState(id, isPush).then(res => {
    ElMessage({
      message: '修改推送状态成功',
      type: 'success'
    })
  });
}
const reportSearch = () => {
  getListReport(reportParams.value).then(res => {
    reportData.value = res.data.rows
    reportParams.value.total = res.data.total
  })
}

search(modelValue)

//导出
const exportHtmlToWord = () => {

}
const handleCheck = (row) => {
  chooseRow.value = Object.assign({}, row)
  const { imgFileUrl, mpFileUrl, id } = chooseRow.value
  chooseRow.value.imgFileUrl1 = JSON.parse(JSON.parse(imgFileUrl).url)
  chooseRow.value.mpFileUrl1 = `${JSON.parse(mpFileUrl).url}?time=${new Date().getTime()}`
  checkForm.id = id
  console.log(chooseRow.value)
  openCheck.value = true
}

const searchDetail = (row) => {
  handleCheck(row)
  checkForm.approvalResult = row.approvalResult + ''
  checkForm.remark = row.remark
}

const submitForm = async (formEl) => {
  formEl.validate((valid, fields) => {
    if (valid) {
      const txt = checkForm.approvalResult == '1' ? '通过' : '驳回';
      ElMessageBox.confirm(
        h('div', [
          h('div', { style: { fontSize: '18px' } }, `确定要${txt}该活动？`),
        ]),
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          saveLoad.value = true
          // const { id, approveLevel } = props.currentRow
          toCheck({ ...checkForm }).then(res => {
            ElMessage({
              message: '审核提交成功',
              type: 'success'
            })
            toClose()
            saveLoad.value = false
            search(modelValue)
          })
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleWatch = () => {
  openPress.value = true
}
const checkSubmit = () => {
  // OrgId = chooseRow.id
  dialogResultVisible.value = true

}
const toClose = () => {
  openCheck.value = false
}

</script>
<style lang="scss" scoped>
.active-detail-msg {
  .el-row {
    height: 40px;
  }
}

.video-img-box {
  display: flex;
  height: 230px;
  // width: 90%;
  margin: 0 auto;
  justify-content: space-around;

  >div {
    width: 47%;
    padding: 10px;

    >div {
      //border: 1px solid #eee;
      height: 164px;
      box-sizing: border-box;

      img,
      video {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
      text-align: center;
    }
  }
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 20px;
  padding-bottom: 10px;
}
</style>
